<template>
   <div>
    <!-- 面包屑导航部分 -->
    <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    </div>

    <!-- 卡片部分 -->
  <el-card class="el-card" >
    <el-button type="primary" @click="showAddDialog">添加分类</el-button>

        <tree-table :data="catesList" :columns="columns" :selection-type="false" :expand-type="false"
        show-index index-text="#" border class="tree-table">
          <template slot="isok" slot-scope="scope">
            <em class="el-icon-success" v-if="!scope.row.cat_deleted"></em>
            <em class="el-icon-error" v-else></em>
          </template>

          <template slot="range" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
            <el-tag type="info" v-else>三级</el-tag>
          </template>

          <template slot="operate" slot-scope="scope">
            <el-button @click="showEditDialog(scope.row)" type="primary" icon="el-icon-edit" plain size="mini">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" plain size="mini" @click="showDeleteDialog(scope.row)">删除</el-button>
          </template>
        </tree-table>

<!-- 这是下边的分页栏目 -->
  <el-pagination class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2,5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>

  </el-card>
  <!-- 这是添加分类的对话框 -->
  <el-dialog
  title="添加分类"
  :visible.sync="addDialogVisable"
  width="70%"
  >
  <!-- 输入分类信息的栏目 -->
  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" class="demo-ruleForm">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addForm.cat_name" ></el-input>
  </el-form-item>

  <el-form-item label="父级分类" >
    <el-cascader
    v-model="valueOfCas"
    :options="parentsList"
    :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id',children:'children',checkStrictly }"
    @change="parentCateChanged" clearable ></el-cascader>
  </el-form-item>


  </el-form>
<!-- 这是取消和确定的两个按钮 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisable = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>

<!-- 编辑分类的对话框 -->
  <el-dialog
  title="编辑分类"
  :visible.sync="editDialogVisable"
  width="70%"
  >
  <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" class="demo-ruleForm">

  <el-form-item label="分类的新名称" prop="cat_name">
    <el-input v-model="editForm.cat_name"></el-input>
  </el-form-item>

  </el-form>
<!-- 这是取消和确定的两个按钮 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisable= false">取 消</el-button>
    <el-button type="primary" @click="editCate">确 定</el-button>
  </span>
</el-dialog>

<!-- 删除分类的对话框 -->
<el-dialog
  title="提示"
  :visible.sync="deleteDialogVisible"
  width="70%"
  >

  <em class="el-icon-warning"></em>此操作将永久删除该分类，是否继续？
<!-- 这是取消和确定的两个按钮 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="deleteDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteCate">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
    addDialogVisable:false,
    editDialogVisable:false,
    deleteDialogVisible:false,
    catesList:[],
    parentsList:[],
    deleteID:'',
    valueOfCas:[],
    checkStrictly	:true,
    editID:'',
    editForm:{
      cat_name:''
    },
    addForm:{
      cat_pid:'',
      cat_name:'',
      cat_level:''
    },
    queryInfo:{
      type:3,
      pagenum:1,
      pagesize:5
    },
    // 总的数据条数
    total:0,
    columns:[{
      label:"分类名称",
      prop:'cat_name'
    },{
      label:"是否有效",
      //表示将当前列定义为模板列
      type:"template",
      //表示将当前这一列使用模板的名称
      template:'isok'
    },
    {
      label:"排序",
      //表示将当前列定义为模板列
      type:"template",
      //表示将当前这一列使用模板的名称
      template:'range'
    },
     {
      label:"操作",
      //表示将当前列定义为模板列
      type:"template",
      //表示将当前这一列使用模板的名称
      template:'operate',

    },
    ],


    addFormRules:{
      cat_pid:[{required:true,message:"父id不能为空！",trigger:'blur'},
      {min:1,max:3,message:"父id的长度在1到3之间",trigger:'blur'}
      ],
      cat_level:[{required:true,message:"分类的等级不能为空！",trigger:'blur'},
      {min:1,max:1,message:"分类等级的长度要为1",trigger:'blur'}
      ],
      cat_name:[{required:true,message:"分类名称不能为空！",trigger:'blur'}],
      cat_newName:[{required:true,message:"分类的新名称不能为空！",trigger:'blur'}],

    },
    editFormRules:{
      cat_name:[{required:true,message:"新名称不能为空！",trigger:'blur'}]
    }
    }
  },
  methods:{

   addCate(){
      this.$refs.addFormRef.validate(async valid =>{
        if(!valid) return;
      const {data:val} = await this.$http.post('categories',this.addForm);
        if(val.meta.status != 201) {
        this.addDialogVisable = false;
        return this.$message.error("添加分类失败")
      }
      console.log(this.addForm);
      this.$message.success("添加分类成功");
      this.addDialogVisable = false;
      this.getCatesList();

      })

    },
    async getCatesList(){
      const {data:val} = await this.$http.get('categories',{params:this.queryInfo});
      if(val.meta.status != 200){
        return  this.$message.error("获取分类信息失败,请重新刷新！");
      }
       this.catesList = val.data.result;
       this.total = val.data.total;

    },
    async getParentsList(){
      const {data:val} = await this.$http.get('categories',{params:{type:2}});
      if(val.meta.status != 200){
        return  this.$message.error("获取父类信息失败,请重新刷新！");
      }
       this.parentsList = val.data;

    },
    showDeleteDialog(id){
      this.deleteID = +id;
      this.deleteDialogVisible = true;
    },
    async deleteCate(){
      console.log(this.deleteID);
      const {data:res} = await this.$http.delete(`categories/${this.deleteID}`);
      console.log(res);
      if(res.meta.status != 200){

      this.deleteDialogVisible = false;
      return this.$message.error("删除分类失败");
      }
      this.$message.success("删除分类成功");
      this.deleteDialogVisible = false;
      this.getCatesList();
    },
    handleSizeChange(newSize){
      this.queryInfo.pagesize = newSize;
      this.getCatesList();
    },
    handleCurrentChange(newPage){
      this.queryInfo.pagenum = newPage;
      this.getCatesList();
    },
     showAddDialog(){
       this.valueOfCas = [];
       this.addForm.cat_pid = 0;
       this.addForm.cat_name = '';
       this.addForm.cat_level = 0;
      this.addDialogVisable = true;
      this.getParentsList();
    },
    showEditDialog(row){
      this.editID = +row.cat_id;
      this.editDialogVisable = true;
    },
    // 实时监控父级选中情况,将选中情况放在于valueOfcas中
    parentCateChanged(){
      console.log("检测到输入框的变化！");
      console.log(this.valueOfCas);
      if(this.valueOfCas.length > 0){
        this.addForm.cat_pid = this.valueOfCas[this.valueOfCas.length-1];
        this.addForm.cat_level = this.valueOfCas.length;
      }else{
        this.addForm.cat_pid = 0;
        this.addForm.cat_level = 0;
      }

    },
    editCate(){
      this.$refs.editFormRef.validate(async valid =>{
        if(!valid) return;
      const {data:val} = await this.$http.put(`categories/${this.editID}`,this.editForm.cat_name);
        if(val.meta.status != 200) {
        this.editDialogVisable = false;
        console.log(val);
        return this.$message.error("编辑分类失败")
      }
      this.$message.success("编辑分类成功");
      this.editDialogVisable = false;
      this.getCatesList();

      })

    },

   },
    created(){
      this.getCatesList();

   }

}
</script>


<style scoped>
.el-table{
    margin-top: 10px;
  }
.el-card{
    margin-top:10px
  }
.el-icon-success{
  color: green;
}
.el-icon-error{
  color: red;
}
.tree-table{
  margin-top:10px
}

</style>
